<template>
  <div class="page history">
    <top>监控记录</top>
    <content>
      <content-block>
        <list>
          <template v-for="item in items">
            <item>
              <item-media>
                <img :src="item.avatar" />
              </item-media>
              <item-content>
                <item-title-row>
                  <item-title>{{item.roomName}}</item-title>
                  <item-title-after>
                    <a class="icon-button" href="javascript:;" v-on:click="watch(item.platform, item.roomId, $index)" title="监控">
                      <img src="../../assets/ic_watch_ing.svg" v-if="item.isWatch"/>
                      <img src="../../assets/ic_watch.svg" v-else/>
                    </a>
                    <a class="icon-button" href="javascript:;" v-on:click="showDel(item.roomId)" title="删除">
                      <img src="../../assets/ic_del.svg"/>
                    </a>
                  </item-title-after>
                </item-title-row>
                <item-sub-title>
                  上次监控: {{item.date}}
                </item-sub-title>
              </item-content>
            </item>
          </template>
        </list>
      </content-block>
    </content>
    <confirm title="删除提示" msg="确定要删除该条监控记录？" :show-icon="false" :show.sync="confirm.show" :on-sure="onDelSure"></confirm>
    <indicator :show="indicator.show" :type="indicator.type" :text="indicator.text"  :overlay-opacity="indicator.opactiy"></indicator>
    <toast v-for="toast in toasts" :text="toast.text" :loading="toast.loading" :icon="toast.icon" :center="toast.center"></toast>
  </div>
</template>
<script>
import top from '../app-components/top'
export default {
  data () {
    return {
      items: [],
      toasts: [],
      confirm: {
        show: false,
        roomId: '0'
      }
    }
  },
  attached () {
    this.items = []
    let localStorage = window.localStorage
    if (localStorage) {
      for (let i = 0; i < localStorage.length; i++) {
        let key = localStorage.key(i)
        if (key.indexOf('room_') > -1) {
          let room = JSON.parse(localStorage.getItem(key))
          room.platform = room.platform || 'dy'
          room.isWatch = this.$RoomManage.hasRoom(room.platform.concat('_').concat(room.roomId))
          this.items.push(room)
        }
      }
    }
  },
  methods: {
    back: function () {
      this.$router.go({ name: 'home' })
    },
    watch: function (platform, roomId, index) {
      this.$RoomManage.addRoom(platform, roomId, (code) => {
        if (code === 0) {
          this.toasts.push({
            text: '直播间监控成功'
          })
          this.items[index].isWatch = true
        } else {
          this.toasts.push({
            text: code === -2 ? '监控中' : '监控失败'
          })
        }
        setTimeout(() => this.toasts.splice(0, 1), 2000)
      })
    },
    showDel: function (roomId) {
      this.confirm.show = true
      this.confirm.roomId = roomId
    },
    onDelSure: function () {
      this.confirm.show = false
      let index = this.items.find((item, i) => {
        if (item.roomId === this.roomId) {
          return i
        }
      })
      window.localStorage.removeItem('room_' + this.confirm.roomId)
      this.items.splice(index, 1)
    }
  },
  components: {
    top
  }
}
</script>

<style lang="less">
.history .content-block{
  max-width: 650px;
}
.history .item-sub-title{
  font-size: 12px;
  color: #eb4f38
}
</style>
